<template>
  <div class="dashboard-container">
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 头部 -->
      <el-row>
        <el-col :span="18">
          <el-form :inline="true" label-width="80px">
            <el-form-item >
              <el-input placeholder="根据用户名搜索" v-model="searchName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="searchNameClear">清空</el-button>
              <el-button type="primary" @click="searchByName">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" class="rightBtn">
          <el-button type="success" size="small" icon="el-icon-edit" @click="handleEdit('add')">新增用户</el-button>
        </el-col>
      </el-row>
      <!-- 记录 -->
      <el-row class="formTitle">
        <i class="el-icon-info"></i>
        <span>共{{renderList.counts}}条记录</span>
      </el-row>
      <!-- 用户列表 -->
      <el-table
      :data="renderList.list"
      style="width: 100%"
      :row-style="{height:'56px'}"
      :header-cell-style="{background:'#fafafa'}"
      >
        <el-table-column
        align='center'
          prop="id"
          label="序号"
          width="200">
        </el-table-column>
        <el-table-column
        align='center'
          prop="email"
          label="邮箱"
          width="200">
        </el-table-column>
        <el-table-column
        align='center'
          prop="phone"
          label="联系电话"
          width="200">
        </el-table-column>
        <el-table-column
        align='center'
          prop="username"
          label="用户名"
          width="200">
        </el-table-column>
        <el-table-column
        align='center'
          prop="permission_group_title"
          label="权限组名称"
          width="200">
        </el-table-column>
        <el-table-column
        align='center'
          prop="role"
          label="角色"
          width="200">
        </el-table-column>
        <el-table-column
        align='center'
          prop="address"
          label="操作">
          <template slot-scope="{row}">
            <el-button
            v-if="row.role!='admin'"
            class="el-icon-edit editbtn form_btn"
              @click="handleEdit('edit',row)"></el-button><!-- 修改 -->
            <el-button
            v-if="row.role!='admin'"
              type="danger"
              class="el-icon-delete delbtn form_btn"
              @click="handleDelete(row)"></el-button><!-- 删除 -->
          </template>
            </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="bottomTool">

        <PageTool :total='renderList.counts' :paginationPage='renderList.page' :paginationPagesize='renderList.pageSize' @pageChange='pageChange' @pageSizeChange='pageSizeChange'>
        </PageTool>
      </div>
    </el-card>
    <!-- 弹框 -->
    <!-- 传入text值， -->
    <UserAdd @handleCloseModal='handleCloseModal'  ref="dialog" :text="changeType==='add'?'添加用户':'编辑用户'" pageTitle='' :PermissionGroupsList='PermissionGroupsList' :formBase='formBase' :ruleInline='ruleInline' @newDataes='newDataes'></UserAdd>
  </div>
</template>

<script>
import PageTool from '@/module-manage/components/page-tool'/* 分页器 */
import UserAdd from '@/module-manage/components/user-add'/* 对话框 */
import { simple } from '@/api/base/permissions.js'
import { list, detail, remove } from '@/api/base/users.js'
export default {
  data () {
    return {
      renderList: {}, /* 渲染数据源 */
      searchName: '',
      changeType: '', /* 判断弹框类型 */
      PermissionGroupsList: [], /* 所有者权限组列表 */
      formBase: { /* 用于回显 */
        username: '',
        email: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: ''
      },
      ruleInline: {
        username: [
          { required: true, message: '请选择用户名', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请选择邮箱', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请选择密码', trigger: 'blur' }
        ],
        permission_group_id: [
          { required: true, message: '请选择密码', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    PageTool: PageTool,
    UserAdd: UserAdd
  },
  async created () {
    const { data } = await list({ page: 1, pagesize: 10, username: '' })
    this.renderList = data
  },

  methods: {
    // 清空搜索
    async searchNameClear () {
      this.searchName = ''
    },
    // 搜索
    async searchByName () {
      const { data } = await list({ page: 1, pagesize: this.renderList.pagesize, username: this.searchName })
      this.renderList = data
    },
    // 进入某一页
    async pageChange (id) {
      this.renderList.page = id
      const { data } = await list({ page: this.renderList.page, pagesize: this.renderList.pagesize, username: this.searchName })
      this.renderList = data
    },
    // 每页条数
    async pageSizeChange (id) {
      this.renderList.pagesize = id
      const { data } = await list({ page: 1, pagesize: this.renderList.pagesize, username: this.searchName })
      this.renderList = data
    },
    cloneObj (data) {
      return {
        username: data.username,
        email: data.email,
        role: data.role,
        permission_group_id: data.permission_group_id,
        phone: data.phone,
        introduction: data.introduction,
        id: data.id
      }
    },
    // 添加或修改用户
    async handleEdit (type, value) {
      this.changeType = type
      const { data } = await simple()/* 简单权限组数据获取 */
      this.PermissionGroupsList = data
      // 判断对话框类型
      if (type === 'edit') {
        // 编辑
        const { data } = await detail({ id: value.id })
        this.formBase = this.cloneObj(data)
      } else {
        // 添加
        this.formBase = {
          username: '',
          email: '',
          role: '',
          permission_group_id: '',
          phone: '',
          introduction: '',
          password: ''/* 添加额外多出的参数需要传递 */
        }
      }
      this.$refs.dialog.dialogFormV()/* 显示弹层 */
    },
    // 删除用户
    async handleDelete (value) {
      // 弹框
      /* 传参一：警示信息
         传参二：警示标题
         传参三： */
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning', /* 警示类型 */
        // MessageBox 关闭前的回调，会暂停实例的关闭。
        // instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；
        // done 用于关闭 MessageBox 实例
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            await remove({ id: value.id })
            // 重新获取新的数据，更新
            const { data } = await list({ page: 1, pagesize: this.renderList.pagesize, username: this.searchName })
            this.renderList = data
            done()
          } else {
            done()
          }
        }
      }).then(() => {
        // 成功提示
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        // 失败提示
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async newDataes () {
      this.$refs.dialog.dialogFormH()/* 弹层隐藏 */
      // 重新获取数据渲染
      const { data } = await list({ page: 1, pagesize: this.renderList.pagesize, username: this.searchName })
      this.renderList = data
    },
    // 关闭弹框
    handleCloseModal () {
      this.$refs.dialog.dialogFormH()/* 弹层隐藏 */
    }
  }
}
</script>

<style scoped lang='less'>
.box-card{
  margin: 20px;
  // padding: 20px;
  .rightBtn{
    display: flex;
    flex-direction: row-reverse;
  }
  .bottomTool{
    margin: 20px 0;
    float: right;
  }
}
.formTitle{
    background-color: #f4f4f5;
    color: #909399;
    height: 34px;
    line-height: 34px;
    padding-left: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    span{
      font-size: 15px;
      margin-left: 8px;
    }
}
.form_btn{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
}
.editbtn{
  background-color: #ecf5ff;
  color: #4ca2ff;
}
.delbtn{
  background-color: #fef0f0;
  color: #f57073;
}

</style>
